import React from 'react';
import {
  IonToolbar,
  IonButton,
  IonIcon,
  IonSelect,
  IonSelectOption,
} from '@ionic/react';
import { swapHorizontal } from 'ionicons/icons';

interface LanguageSelectorProps {
  sourceLanguage: string;
  targetLanguage: string;
  onSwap: () => void;
  onSourceChange: (language: string) => void;
  onTargetChange: (language: string) => void;
}

const LANGUAGES = [
  { code: 'auto', name: '自动检测' },
  { code: 'zh', name: '中文' },
  { code: 'en', name: 'English' },
  { code: 'ja', name: '日本語' },
  { code: 'ko', name: '한국어' },
  { code: 'fr', name: 'Français' },
  { code: 'de', name: 'Deutsch' },
  { code: 'es', name: 'Español' },
  { code: 'it', name: 'Italiano' },
  { code: 'ru', name: 'Русский' },
  { code: 'pt', name: 'Português' },
  { code: 'ar', name: 'العربية' },
  { code: 'hi', name: 'हिन्दी' },
  { code: 'th', name: 'ไทย' },
  { code: 'vi', name: 'Tiếng Việt' },
];

const LanguageSelector: React.FC<LanguageSelectorProps> = ({
  sourceLanguage,
  targetLanguage,
  onSwap,
  onSourceChange,
  onTargetChange,
}) => {
  return (
    <IonToolbar>
      <div className="ion-padding-horizontal flex-container">
        <IonSelect
          value={sourceLanguage}
          onIonChange={e => onSourceChange(e.detail.value)}
          interface="popover"
          className="language-select"
        >
          {LANGUAGES.filter(lang => lang.code === 'auto' || lang.code !== targetLanguage).map(lang => (
            <IonSelectOption key={lang.code} value={lang.code}>
              {lang.name}
            </IonSelectOption>
          ))}
        </IonSelect>

        <IonButton
          fill="clear"
          onClick={onSwap}
          disabled={sourceLanguage === 'auto'}
        >
          <IonIcon icon={swapHorizontal} />
        </IonButton>

        <IonSelect
          value={targetLanguage}
          onIonChange={e => onTargetChange(e.detail.value)}
          interface="popover"
          className="language-select"
        >
          {LANGUAGES.filter(lang => lang.code !== 'auto' && lang.code !== sourceLanguage).map(lang => (
            <IonSelectOption key={lang.code} value={lang.code}>
              {lang.name}
            </IonSelectOption>
          ))}
        </IonSelect>
      </div>
    </IonToolbar>
  );
};

export default LanguageSelector;